<template>
    <h2>定义线路</h2>
    <div>
        <el-row>
            <el-col :span="6">
                <div>
                    <br>
                    <el-card style="max-width: 310px">
                        <el-input v-model="origin" style="width: 280px" placeholder="起点" @change="AlterOrigin()" />
                        <br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
                        &nbsp; &nbsp;
                        <span @click="Transition()">转换</span><br>
                        <el-input v-model="destination" style="width: 280px" placeholder="终点"
                            @change="AlterDestination()" />
                    </el-card>

                    <br />
                    <el-card style="max-width: 315px">
                        <button @click="Allroutes()"> 全部 </button>
                        <button @click="leastDistance()"> 最短距离 </button>
                        <button @click="bikapgaos()"> 避开高速 </button>
                    </el-card>
                    <el-button :disabled="DetermineTheRoute == 0" type="primary" style="width: 150px;"
                        @click="TRUpdateLine()">确定路线</el-button>


                </div>
            </el-col>
            <el-col :span="18">
                <baidu-map class="bm-view" :zoom="15" :center="{ lng: 116.404, lat: 39.915 }" :scroll-wheel-zoom="true">

                    <bm-driving v-if="DetermineTheRoute == 0" :start="lushuPoint.start" :end="lushuPoint.end"
                        :auto-viewport="true" policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE" :panel="true">
                    </bm-driving>
                    <bm-driving v-if="DetermineTheRoute == 0" :start="lushuPoint.start" :end="lushuPoint.end"
                        :auto-viewport="true" policy="BMAP_DRIVING_POLICY_AVOID_HIGHWAYS" :panel="true">
                    </bm-driving>
                    <bm-driving v-if="DetermineTheRoute == 1" :start="lushuPoint.start" :end="lushuPoint.end"
                        :auto-viewport="true" policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE" :panel="true">
                    </bm-driving>
                    <bm-driving v-if="DetermineTheRoute == 2" :start="lushuPoint.start" :end="lushuPoint.end"
                        :auto-viewport="true" policy="BMAP_DRIVING_POLICY_AVOID_HIGHWAYS" :panel="true">
                    </bm-driving>

                    <bm-marker :position="{ lng: 116.13306898985384, lat: 40.23854408138427 }"
                        :dragging="true"></bm-marker>
                </baidu-map>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue';
import axios from 'axios';
import { useGeocoder, usePoint } from 'vue-baidu-map-3x';
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import { number } from 'echarts';
const route = useRoute()
const router = useRouter()
//起点
const origin = ref("")
const AlterOrigin = () => {
    useGeocoder().then((geocoder:any) => {
        geocoder.getPoint(origin.value, (res:any) => {
            lushuPoint.value.start.lng = res.lng
            lushuPoint.value.start.lat = res.lat
            console.log(res);
        });
    });
}
//终点
const destination = ref("")
const AlterDestination = () => {
    useGeocoder().then((geocoder:any) => {
        geocoder.getPoint(destination.value, (res:any) => {
            lushuPoint.value.end.lng = res.lng
            lushuPoint.value.end.lat = res.lat
            console.log(res);
        });
    });
}
//起始点转换
const Transition = () => {
    let zhongzhuan = origin.value
    origin.value = destination.value
    destination.value = zhongzhuan
    AlterDestination()
    AlterOrigin()
}
//确定路线
const DetermineTheRoute = ref(0);
//路线
const policy = ref('');
const lushuPoint = ref({
    start: {
        lng: null,
        lat: null
    },
    end: {
        lng: null,
        lat: null
    },
});
//全部路线
const Allroutes = () => {
    DetermineTheRoute.value = 0
}
//最短距离
const leastDistance = () => {
    DetermineTheRoute.value = 1
    TRlientuo.lineroute = DetermineTheRoute.value
};
//避开高速
const bikapgaos = () => {
    DetermineTheRoute.value = 2
    TRlientuo.lineroute = DetermineTheRoute.value
};
onMounted(() => {

    //货主合同查看详情
    GetContracted()
})
//货主合同查看详情
const GetContractedinfo: any = ref({})
const GetContracted = () => {
    let id = route.query.id
    axios.get('ContractRead/api/ReadContract/GetContracted', {
        params: {
            contractId: id
        }
    }).then((ret) => {
        console.log(ret.data.data)
        GetContractedinfo.value = ret.data.data
        TRBackFillLine()
    })
}

//显示路线
const TRBackFillLinelist: any = ref([])
const TRBackFillLine = () => {
    axios.get('FoundationRead/api/Foundation/TRBackFillLine', {
        params: {
            lineName: GetContractedinfo.value.line
        }
    }).then((ret) => {
        console.log(ret.data.data)
        TRBackFillLinelist.value = ret.data.data[0]
        origin.value = ret.data.data[0].riseFullAddress//起点
        destination.value = ret.data.data[0].terminalFullAddress//终点
        AlterOrigin()
        AlterDestination()
        if (ret.data.data[0].lineroute == 1) {
            leastDistance()
        } else if (ret.data.data[0].lineroute == 2) {
            leastDistance()
        }
    })
}
//确定路线
const TRlientuo = reactive({
    "lineId": 0,
    "lineroute": 0
})
const TRUpdateLine = () => {
    TRlientuo.lineId = TRBackFillLinelist.value.lineId;
    axios.post('Contract/api/WeatherFoundation/TRUpdateLine', TRlientuo).then((ret) => {
        if (ret.data.data == "1") {
            if (GetContractedinfo.value.contractNumber.substring(0, 2) == "HZ") {
                router.push("/OwnerContractTraceShow")
            } else {
                router.push("/ContractCarriagesList")
            }
            ElMessage.success("路线定义成功")

        } else {
            ElMessage.error("路线定义失败")
        }
    })
}


</script>
<style>
.bm-view {
    width: 900px;
    height: 500px;
}
</style>